<template>
    <div style="width: 98%; height: 1000px; margin-top: 20px; margin: auto; background-color: #f9f8f8;">
        <!-- 页面内容 -->
        <el-table :data="[tableDatatwo]" style="width: 100%;" border>
            <el-table-column prop="totalStudents" label="班级总人数" width="200" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-user-solid" style="color: red;"></i> <!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        &nbsp;&nbsp;班级总人数
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="notParticipating" label="不参与就业" width="200" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-close" style="color: red;"></i> <!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-times"></i> -->
                        &nbsp;&nbsp;不参与就业
                    </span>
                </template>
            </el-table-column>
            <!-- 将参与就业合并单元格 -->
            <el-table-column prop="Participating" label="参与就业" width="141" align="center"
                style="border: 1px solid #000;">
                <template slot="header">
                    <span>
                        <i class="el-icon-check" style="color: red;"></i> <!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-users"></i> -->
                        &nbsp;&nbsp;参与就业
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="employedNumber" label="已就业数" width="141" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-check" style="color: red;"></i> <!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-users"></i> -->
                        &nbsp;&nbsp;已就业数
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="unemployedNumber" label="未就业数" width="141" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-close" style="color: red;"></i><!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-users"></i> -->
                        &nbsp;&nbsp;未就业数
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="employmentRate" label="就业占比" width="141" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-percent" style="color: red;"></i> <!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-percent"></i> -->
                        &nbsp;&nbsp;就业占比
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="growthLastWeek" label="上周增长" width="141" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-arrow-up" style="color: red;"></i><!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-users"></i> -->
                        &nbsp;&nbsp;上周增长
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结课时间" width="141" align="center">
                <template slot="header">
                    <span>
                        <i class="el-icon-time" style="color: red;"></i><!-- 使用 Element UI 图标 -->
                        <!-- 或者使用 Font Awesome 图标 -->
                        <!-- <i class="fas fa-users"></i> -->
                        &nbsp;&nbsp;结课时间
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div class="common-layout">
            <el-container>
                <el-aside width="350px">
                    <div class="search-container" style="width: 300px;">
                        <input type="text" placeholder="请输入关键词进行搜索" v-model="searchKeyword1"
                            @keyup.enter="handleSearch1">
                    </div>
                    <el-tree class="filter-tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
                        :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree">
                    </el-tree>
                </el-aside>
                <el-main>
                    <div style="height: 420px;">
                        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                            label-width="68px">
                            <el-form-item label="名字" prop="studentName">
                                <el-input v-model="queryParams.studentName" placeholder="请输入名字" clearable
                                    @keyup.enter.native="handleQuery" />
                            </el-form-item>
                            <el-form-item label="学生状态" prop="status">
                                <el-select v-model="queryParams.status" placeholder="请选择学生状态" clearable>
                                    <el-option v-for="dict in dict.type.sys_student_status" :key="dict.value"
                                        :label="dict.label" :value="dict.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" size="mini"
                                    @click="handleQuery">搜索</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                            </el-form-item>

                            <!-- 就业走势按钮 -->
                            <el-button type="primary" icon="el-icon-line-chart" size="mini"
                                @click="handleEmploymentTrend">就业走势</el-button>

                        </el-form>
                        <template>
                            <el-table v-loading="loading" :data="studentList">
                                <el-table-column type="selection" width="55" align="center" />
                                <el-table-column label="ID" align="center" prop="id" />
                                <el-table-column label="名字" align="center" prop="studentName" />
                                <el-table-column label="班级" align="center" prop="classes" />
                                <el-table-column label="校区" align="center" prop="campus">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.sys_campus_type" :value="scope.row.campus" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="学生状态" align="center" prop="status">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.sys_student_status" :value="scope.row.status" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="模拟面试" align="center" prop="mockInterview">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.sys_mock_interview"
                                            :value="scope.row.mockInterview" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="结业考试" align="center" prop="finalTest">
                                    <template slot-scope="scope">
                                        <dict-tag :options="dict.type.sys_final_test" :value="scope.row.finalTest" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="电话" align="center" prop="phone" />
                                <el-table-column label="年龄" align="center" prop="age" />
                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width"
                                    min-width="180px">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" icon="el-icon-set-up"
                                            @click="handleTraceHistory(scope.row)">跟踪</el-button>
                                        <el-button size="mini" type="text" icon="el-icon-check"
                                            @click="handleJoinEmployment(scope.row)">
                                            加入就业
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                                :limit.sync="queryParams.pageSize" @pagination="getList" />
                        </template>
                    </div>
                    <div>
                        <template>
                            <div class="app-container">
                                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
                                    v-show="showSearch" label-width="68px">
                                    <el-form-item label="学生名" prop="studentName">
                                        <el-input v-model="queryParams.studentName" placeholder="请输入学生名" clearable
                                            @keyup.enter.native="handleQuery" />
                                    </el-form-item>

                                    <el-form-item label="责任人" prop="dutyMan">
                                        <el-input v-model="queryParams.dutyMan" placeholder="请输入责任人" clearable
                                            @keyup.enter.native="handleQuery" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-search" size="mini"
                                            @click="handleQuery">搜索</el-button>
                                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-table v-loading="loading" :data="countList"
                                    @selection-change="handleSelectionChange">
                                    <el-table-column type="selection" width="55" align="center" />
                                    <el-table-column label="学生就业情况" align="center" prop="id" />
                                    <el-table-column label="学生名" align="center" prop="studentName" />
                                    <el-table-column label="班级名" align="center" prop="className" />
                                    <el-table-column label="工作状态" align="center" prop="workStatus">
                                        <template slot-scope="scope">
                                            <dict-tag :options="dict.type.sys_student_status"
                                                :value="scope.row.workStatus" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="班级id" align="center" prop="classId" />
                                    <el-table-column label="学生id" align="center" prop="studentId" />
                                    <el-table-column label="责任人" align="center" prop="dutyMan" />
                                    <el-table-column label="公司" align="center" prop="company" />
                                    <el-table-column label="薪资" align="center" prop="salary" />
                                    <el-table-column label="入职时间" align="center" prop="workTime" width="180">
                                        <template slot-scope="scope">
                                            <span>{{ parseTime(scope.row.workTime, '{y}-{m}-{d}') }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="备注" align="center" prop="remark" />
                                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                        <template slot-scope="scope">
                                            <!-- 跟踪记录按钮 -->
                                            <el-button size="mini" type="text" icon="el-icon-search"
                                                @click="handleTrackRecord(scope.row)"
                                                v-hasPermi="['employment:track:record']">跟踪记录</el-button>
                                            <!-- 移除就业按钮 -->
                                            <el-button size="mini" type="text" icon="el-icon-unlock"
                                                @click="handleRemoveEmployment(scope.row)"
                                                v-hasPermi="['employment:status:change']">移除就业</el-button>
                                            <el-button size="mini" type="text" icon="el-icon-edit"
                                                @click="handleUpdate(scope.row)"
                                                v-hasPermi="['employment:count:edit']">修改</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                                    :limit.sync="queryParams.pageSize" @pagination="getList" />

                                <!-- 跟踪记录 -->
                                <el-dialog :title="title" :visible.sync="traceHistoryVisible" width="500px">
                                    <div>
                                        <el-form ref="formtwo" :model="formtwo" :rules="rules" label-width="80px">
                                            <el-form-item label="学生" prop="studentName">
                                                <el-input v-model="formtwo.studentName" placeholder="请输入追踪人" />
                                            </el-form-item>
                                            <el-form-item label="跟踪日期" prop="trackDate">
                                                <el-date-picker clearable v-model="formtwo.trackDate" type="date"
                                                    value-format="yyyy-MM-dd" placeholder="请选择跟踪日期">
                                                </el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="追踪目的" prop="trackPurpose">
                                                <el-select v-model="formtwo.trackPurpose" placeholder="请选择追踪目的">
                                                    <el-option v-for="(option, index) in trackPurposesOptions"
                                                        :key="index" :label="option.label" :value="option.value">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="追踪人" prop="trackMan">
                                                <el-input v-model="formtwo.trackMan" placeholder="请输入追踪人" />
                                            </el-form-item>
                                            <el-form-item label="追踪次数" prop="trackCount">
                                                <el-input v-model="formtwo.trackCount" placeholder="请输入追踪次数" />
                                            </el-form-item>
                                            <el-form-item label="学生状态" prop="studentStatus">
                                                <el-input v-model="formtwo.studentStatus" placeholder="请输入追踪备注" />
                                            </el-form-item>
                                            <el-form-item label="追踪备注" prop="trackRemark">
                                                <el-input v-model="formtwo.trackRemark" placeholder="请输入追踪备注" />
                                            </el-form-item>
                                        </el-form>
                                        <div slot="footer" class="dialog-footer" style="margin-left: 300px;">
                                            <el-button type="primary" @click="submitForm">确 定</el-button>
                                            <el-button @click="cancel">取 消</el-button>
                                        </div>
                                    </div>
                                    <div class="block" style="margin-top: 100px;">
                                        <el-timeline>
                                            <el-timeline-item v-for="item in traceFocusList"
                                                :timestamp="item.createTime" placement="top" :color="getColor(item)">
                                                <el-card>
                                                    <h4>跟踪人[{{ item.teacherName }}]</h4>
                                                    <p>问题说明：{{ item.remark }}</p>
                                                </el-card>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="cancel">取 消</el-button>
                                    </span>
                                </el-dialog>
                                <!-- 添加就业 -->
                                <!-- 添加或修改工作对话框 -->
                                <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
                                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                                        <el-form-item label="学生名" prop="studentName">
                                            <el-input v-model="form.studentName" placeholder="请输入学生名" />
                                        </el-form-item>
                                        <el-form-item label="工作状态" prop="workStatus">
                                            <el-select v-model="form.workStatus" placeholder="请选择学生状态">
                                                <el-option v-for="(status, index) in studentStatusOptions" :key="index"
                                                    :label="status.label" :value="status.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="公司" prop="company">
                                            <el-input v-model="form.company" placeholder="请输入公司" />
                                        </el-form-item>
                                        <el-form-item label="薪资" prop="salary">
                                            <el-input v-model="form.salary" placeholder="请输入薪资" />
                                        </el-form-item>
                                        <el-form-item label="入职时间" prop="workTime">
                                            <el-date-picker clearable v-model="form.workTime" type="date"
                                                value-format="yyyy-MM-dd" placeholder="请选择入职时间">
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="备注" prop="remark">
                                            <el-input v-model="form.remark" placeholder="请输入备注" />
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button type="primary" @click="submitFormtwo">确 定</el-button>
                                        <el-button @click="canceltwo">取 消</el-button>
                                    </div>

                                </el-dialog>
                                <!-- //移除表单 -->
                                <el-dialog :title="title" :visible.sync="remove" width="500px" append-to-body>
                                    <el-form ref="formremove" :model="formremove" :rules="rules" label-width="80px">
                                        <el-form-item label="学生名" prop="studentName">
                                            <el-input v-model="formremove.studentName" placeholder="请输入学生名" />
                                        </el-form-item>
                                        <el-form-item label="工作状态" prop="workStatus" disabled>
                                            <el-input v-model="formremove.workStatus" />
                                        </el-form-item>
                                        <el-form-item label="备注" prop="remark">
                                            <el-input v-model="formremove.remark" placeholder="请输入备注" />
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button type="primary" @click="submitFormtree">确 定</el-button>
                                        <el-button @click="canceltree">取 消</el-button>
                                    </div>
                                </el-dialog>
                                <!-- 就业走势图 -->
                                <!-- 就业走势图容器，与弹窗外共享同一个 -->
                                <!-- 弹窗里面先不展示 -->
                                <div style="height: 1000px;"> <!-- 设置一个固定高度的容器 -->
                                    <el-dialog :title="title" :visible.sync="employChart" @open="opentwo()"
                                        append-to-body>
                                        <el-button type="primary" @click="switchToBarChart">切换为柱状图</el-button>
                                        <div class="echart" id="mychart" style="width: 500px; height: 600px;"></div>
                                        <!-- 将高度设置为100% -->
                                    </el-dialog>
                                </div>

                            </div>
                        </template>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>

    <!-- 您可以根据需求添加其他元素或组件 -->
</template>

<script>
import {
    listCurriculum,
    getCurriculum,
    delCurriculum,
    addCurriculum,
    updateCurriculum,
    getCurriculumList
} from "@/api/teaching/curriculum";
import { updateStudent, listStudent } from "@/api/student/student";
import { listTrace } from "@/api/teaching/trace";
import { addTrack } from "@/api/employment/track";
import * as echarts from "echarts";
import { groupByTime, listCount, updateStatusClass, addCount, listStudentStatus, delCount } from "@/api/employment/count";
export default {
    name: "HelpPage", // 组件名称，这里修改为更具语义化的 "HelpPage"
    dicts: ['sys_mock_interview', 'sys_student_status', 'sys_final_test', 'sys_campus_type', 'sys_question_type'],
    data() {
        return {
            myChart: {},
            xData: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], //横坐标
            yData: [], //人数数据
            myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
            employChart: false,
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label',
                id: 'id'
            },
            formremove: {
                studentName: null,
                workStatus: null,
                remark: null
            },
            studentStatusOptions: [
                { label: '在读未毕业', value: 0 },
                { label: '留级在读', value: 1 },
                { label: '毕业未就业', value: 2 },
                { label: '已就业', value: 3 }
            ],
            open: false,
            form: {
                id: null,
                studentName: null,
                className: null,
                workStatus: null,
                classId: null,
                studentId: null,
                dutyMan: null,
                company: null,
                salary: null,
                workTime: null,
                remark: null
            },
            formtwo: {
                className: null,
                studentName: null,
                trackDate: null,
                trackPurpose: null,
                trackRemark: null,
                studentStatus: null,
                studentId: null,
                classId: null
            },
            trackPurposesOptions: [
                { label: '简历修改', value: 0 },
                { label: '录音分析', value: 1 },
                { label: '就业指导', value: 2 }
            ],
            // 班级对应校区表单
            campusClassForm: {
                id: null,
                campusClass: '',
                parentId: '',
                studentId: null,
            },
            // 跟踪记录
            traceFocusList: [],
            countList: [],
            queryParamstwo: {
                pageNum: 1,
                pageSize: 10,
                studentName: null,
                className: null,
                workStatus: null,
                classId: null,
                studentId: null,
                dutyMan: null,
                company: null,
                salary: null,
                workTime: null,
            },
            showSearch: true,
            // 多选学生列表
            selectionStudentList: [],
            studentList: [],
            studentListtwo: [],
            // 数据部分，您可以在这里声明组件内部的数据对象
            // 示例数据：
            message: 'Hello, this is a help page!',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableDatatwo: {
                totalStudents: null,
                notParticipating: null,
                Participating: null,
                employedNumber: null,
                unemployedNumber: null,
                employmentRate: null,
                growthLastWeek: 2,
                endTime: "2024/3/28",
            },
            // 更多行数据...
            currentNode: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                studentName: null,
                classes: null,
                campus: null,
                status: null,
                phone: null,
            },
            traceHistoryVisible: false,
            currentRow: {
                id: null,
                studentName: null,
                sex: null,
                classes: null,
                campus: null,
                status: null,
                mockInterview: null,
                finalTest: null,
                phone: null,
                age: null,
                education: null,
                speciality: null,
                school: null,
                parentPhone: null,
                version: null
            },
            queryParamsone: {
                pageNum: 1,
                pageSize: 10,
                classId: null,
                className: null,
                courseDate: null,
                weekDay: null,
                content: null,
                teacherId: null,
                teacherName: null,
                reamark: null,
                deleted: null,
                campusId: null,
                campusName: null,
                subjectId: null,
                subjectName: null
            },
            remove: false,
            removeClass: {},
            courseInfo: [],
            week: [],
            isLineChart: true,

        };
    },
    methods: {
        switchToBarChart() {
            this.isLineChart = !this.isLineChart;
            this.initEcharts();

        },
        opentwo() {
            this.$nextTick(() => {
                //  执行echarts方法
                this.initEcharts()
            })
        },
        //查询每周的就业人数
        workStundetCount() {
            groupByTime().then(response => {
                this.yData = response;
                console.log(response);
            });
            //去后端查询
        },
        //就业走势图
        handleEmploymentTrend() {




            this.employChart = true;

        },
        initEcharts() {
            const option = {
                xAxis: {
                    data: this.xData
                },
                yAxis: {},
                series: [
                    {
                        data: this.yData,
                        type: this.isLineChart ? "line" : "bar"  // 类型设置为折线图
                    }
                ]
            };
            this.myChart = echarts.init(document.getElementById("mychart"));
            this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });
        },

        //层次树
        findAllParentsById(id, nodes = this.data, parents = []) {
            for (const node of nodes) {
                if (Array.isArray(node.children) && node.children.length > 0) {
                    const foundInChildren = this.findAllParentsById(id, node.children, [...parents, node]);
                    if (foundInChildren.length > 0) {
                        return foundInChildren;
                    }
                }
                if (node.id === id) {
                    return [...parents, node];
                }
            }
            return parents;
        },
        handleNodeClick(node) {
            const targetNodeId = node.id; // 替换为你想查询的目标节点ID
            const parents = this.findAllParentsById(targetNodeId);
            if (parents.length > 0) {
                console.log('Parent Nodes:');
                parents.forEach((parent, index) => {
                    console.log(`Level ${index + 1}:`, parent.label);
                    this.courseInfo.push(parent.label);
                });
                console.log(this.courseInfo);
                this.queryParamsone.campusName = this.courseInfo[0];
                this.queryParamsone.subjectName = this.courseInfo[1];
                this.queryParamsone.className = this.courseInfo[2];
                listCurriculum(this.queryParamsone).then(response => {
                    // this.curriculumList = response.rows;
                    // this.total = response.total;
                });
                this.courseInfo = [];
            } else {
                console.log('Target node not found');
            }
        },
        //层次树
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //移除就业
        handleRemoveEmployment(row) {
            //弹出移除框
            this.remove = true;
            this.formremove.studentName = row.studentName;
            this.formremove.workStatus = row.workStatus;
            this.formremove.remark = row.remark;
            this.title = "移除就业";
            // 删除本条数据
            this.removeClass = row;
            // 修改学生的状态
        },
        submitFormtree() {
            // 删除本条数据
            delCount(this.removeClass.id);
            // 修改学生的状态
            updateStatusClass(this.removeClass.studentId).then(response => {
                this.getList();
            });
            this.remove = false;
            this.getListtwo();
        },
        canceltree() {
            this.remove = false;
        },
        // 取消按钮
        canceltwo() {
            this.open = false;
        },
        submitFormtwo() {
            //加入就业之后，还要修改学生的状态
            addCount(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getListtwo();
            });
            //修改学生状态
            this.currentRow.status = 3;
            updateStudent(this.currentRow).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
            });
        },
        //加入就业
        handleJoinEmployment(row) {
            this.form.studentName = row.studentName;
            this.form.className = row.classes;
            this.form.classId = row.classId;
            this.form.studentId = row.id;
            this.open = true;
            this.currentRow = row;
        },
        submitForm() {
            addTrack(this.formtwo).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.traceHistoryVisible = false;
            });
        },
        /** 给跟踪记录的时间戳赋颜色 */
        getColor(item) {
            let _this = this;
            if (item.traceTimes === _this.traceFocusList.length) {
                return '#0BBD87';
            } else {
                return '#EE1118';
            }
        },
        // 取消按钮
        cancel() {
            this.traceHistoryVisible = false;
        },
        /** 查询跟踪列表 */
        getTraceList() {
            this.loading = true;
            listTrace(this.queryParams).then(response => {
                this.traceList = response.rows;
                this.loading = false;
            });
        },
        /** 跟踪记录 */
        handleTraceHistory(row) {
            this.formtwo.className = row.classes;
            this.formtwo.studentName = row.studentName;
            this.formtwo.studentId = row.id;
            this.formtwo.studentStatus = row.status;
            let _this = this;
            _this.traceHistoryVisible = true;
            _this.title = '[' + row.studentName + ']的跟踪历史';
            this.campusClassForm.studentId = row.id;
            listTrace(this.campusClassForm).then(response => {
                _this.traceFocusList = response.rows;
            });
        },
        /** 查询工作列表 */
        getListtwo() {
            this.loading = true;
            listCount(this.queryParamstwo).then(response => {
                this.countList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 方法部分，您可以在这里定义组件的方法
        // 示例方法：
        greetUser() {
            console.log(this.message);
        },
        getList() {
            this.loading = true;
            //这里我们改成查所有状态是未就业的学生
            listStudentStatus(this.queryParams).then(response => {
                this.studentList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 查询所有的学生*/
        getListthree() {
            this.loading = true;
            listStudent(this.queryParams).then(response => {
                this.studentListtwo = response.rows;
                console.log(response.rows);
                this.tableDatatwo.totalStudents = this.studentListtwo.length;
                console.log(this.tableDatatwo.totalStudents);
                this.tableDatatwo.notParticipating = this.studentListtwo.filter(student => [4].includes(student.status)).length;
                this.tableDatatwo.Participating = this.studentListtwo.filter(student => [0, 1, 2, 3].includes(student.status)).length;
                this.tableDatatwo.employedNumber = this.studentListtwo.filter(student => [3].includes(student.status)).length;
                this.tableDatatwo.unemployedNumber = this.tableDatatwo.Participating - this.tableDatatwo.employedNumber;
                if (this.tableDatatwo.Participating > 0) {
                    this.tableDatatwo.employmentRate = this.tableDatatwo.employedNumber / this.tableDatatwo.Participating;
                } else {
                    this.tableDatatwo.employmentRate = 0;
                }
                console.log(this.tableDatatwo);
                this.total = response.total;
                this.loading = false;
            });
            getCurriculumList().then(response => {
                this.data = response.data
                console.log(this.data)
            });
        },

    },
    beforeDestroy() {
        // 销毁图表实例防止内存泄漏
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
    },
    mounted() {
        this.workStundetCount();
        // 生命周期钩子，在组件实例被挂载时执行
        // 在这里可以进行 DOM 查询、数据请求或其他初始化操作
        this.greetUser(); // 调用示例方法

        this.initEcharts();


    },
    created() {

        this.getList();
        this.getListthree();
        this.getListtwo();
        this.getTraceList();

    },
};
</script>

<style scoped>
.search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
}

.search-container input[type="text"] {
    flex-grow: 1;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-container button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    margin-left: 1rem;
}

div {
    font-size: 16px;
    color: #333;
}
</style>